<template>
<div id="train">
  <div id="trainIndex">
      <el-dialog :title="'以下'+nullUnitList.length+'家单位对接0人，请检查'" :visible.sync="nullUnitVisible" width="98%" top="20px" :close-on-click-modal="false" :close-on-press-escape="false" >
        <el-table :data="nullUnitList" highlight-current-row  style="width: 100%;border-right:1px solid #EBEEF5" border>
          <el-table-column prop="" label="单位名称" min-width="200">
            <template slot-scope="scope">
              {{scope.row}}
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog title="提醒" :visible.sync="warningVisible" width="98%" top="20px" :close-on-click-modal="false" :close-on-press-escape="false" >
        <el-row>
          <el-col :span="12">
            <div v-if="!remindDate">提前 <el-input-number style="width:150px" :min="1" :max="100" @change="changeRemindDay" v-model="remindDayNumber" /> 天提醒</div>
            <div style="font-size:16px;" v-else>{{remindDate}} 开班 <el-button @click="getRemindClassList()" style="margin:0 0 0 10px" type="primary">查看全部提醒</el-button></div>
            <section class="wboxd" style="width: calc(100% - 20px);margin:10px 0 350px" >
              <el-table :data="remindClassList" highlight-current-row class="mytable" v-loading="loading" style="width: 100%" border>
                <el-table-column type="index" label="序号" width="60" align="center">
                </el-table-column>
                <el-table-column prop="className" label="参训班次" min-width="140">
                </el-table-column>
                <el-table-column prop="startDate" label="开班时间" width="100" align="center">
                </el-table-column>
                <el-table-column prop="duration" label="时长" width="60" align="center">
                </el-table-column>
                <el-table-column label="操作" width="100">
                  <template slot-scope="scope">
                      <el-button size="small" @click="handleDetailClass(scope.row.id)" style="margin:10px 0 10px 0">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </section>
          </el-col>
          <el-col :span="12">
            <div v-if="loading2">数据加载中...</div>
            <el-calendar v-else v-model="myMonth">
              <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
              <template
                slot="dateCell"
                slot-scope="{date, data}"
              >
                <p :class="data.isSelected ? 'is-selected' : ''">
                  {{ data.day.split('-').slice(1).join('-') }}
                </p>
                <el-button v-if="classCount(data.day)" type="danger" size="mini" style="font-weight:bolder;" @click="showClass(data.day)">{{classCount(data.day)}}个班</el-button>
              </template>
            </el-calendar>
          </el-col>
        </el-row>
      </el-dialog>
      <el-dialog title="查看班次" :visible.sync="classDetailVisual" width="98%" top="20px" :close-on-click-modal="false" :close-on-press-escape="false" >
        <div>
          <class-detail :id="classId" :showPerson="userType!==2" />
        </div>
      </el-dialog>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item>干部培训</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="wboxs">
      <div style="float:right;" v-if="inRoles('ROLE_training')">
        {{updateLogText}}
        <!-- <el-button type="warning" @click="handleAuth" icon="el-icon-setting" style="margin:10px 0;color:#fff !important">授权</el-button> -->
        <el-button type="success" @click="handleAdd" icon="el-icon-plus" style="margin:10px 0;color:#fff">新增批次</el-button>
        <el-badge :value="remindNum" class="item" :hidden="!remindNum">
          <el-button @click="handleWarning" icon="el-icon-message-solid" style="margin:0">提醒</el-button>
        </el-badge>
        <el-tooltip class="item" effect="dark" :content="nullUnitList.length+'家单位对接0人，点击查看详情'" placement="top" v-if="nullUnitList&&nullUnitList.length>0">
          <el-button type="danger" @click="showNullUnit" icon="el-icon-question"></el-button>
        </el-tooltip>
      </div>
      <div style="float:left;margin:10px 10px 0;height:50px;overflow:hidden">
        <el-form :inline="true" :model="filters" @submit.native.prevent>
          <div style="height:50px;overflow:hidden">
            <el-radio-group v-if="userType===3||userType===4" v-model="status" @change="searchPatch" >
              <el-radio-button :label="userType">待处理</el-radio-button>
              <el-radio-button :label="null">全部批次</el-radio-button>
            </el-radio-group>
            <el-form-item label="">
              <el-input v-model="filters.key" style="width:160px;" placeholder="批次名称" @keyup.enter.native="searchPatch"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchPatch" icon="el-icon-search">查询</el-button>
              <el-button @click="handlePerson" icon="el-icon-user" style="color:#fff" v-if="showPersonBtn">全部人员</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </section>
    <section class="wboxd" style="margin-top:10px">
      <el-table :data="batchList" highlight-current-row v-loading="listLoading" style="width: 100%;" :height="tableHeight" border row-key="index" :tree-props="{children: 'classList', hasChildren: 'hasChildren'}">
        <el-table-column prop="" label="" width="70" align="center">
        </el-table-column>
        <el-table-column prop="batchIndex" label="序号" width="70" align="center">
        </el-table-column>
        <el-table-column prop="batchName" label="批次名称" width="200">
        </el-table-column>
        <el-table-column prop="endDate" label="批次报名截止时间" width="140">
          <template slot-scope="scope" v-if="!scope.row.startDate">
            {{dateFtt('yyyy-MM-dd',scope.row.endDate)}}
          </template>
        </el-table-column>
        <el-table-column prop="className" label="班次名称" width="200">
        </el-table-column>
        <el-table-column prop="startDate" label="班次时间" width="200">
          <template slot-scope="scope" v-if="scope.row.startDate">
            {{dateFtt('yyyy-MM-dd',scope.row.startDate)}} 至
            {{dateFtt('yyyy-MM-dd',scope.row.endDate)}}
          </template>
        </el-table-column>
        <el-table-column prop="persons" header-align="center" label="参训人选" min-width="250">
          <template slot-scope="scope">
            <candidates v-if="scope.row.officialCandidateList" type="official" :candidateList="scope.row.officialCandidateList" :canEdit="false"></candidates>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="trainDate" label="创建时间" width="120" align="center" sortable >
        </el-table-column> -->
        <el-table-column prop="status" label="当前批次状态" width="130" align="center" >
          <template slot-scope="scope">
            <span v-if="scope.row.status===1" :style="myStyle(scope.row.status)">培训处</span>
            <span v-if="scope.row.status===2" :style="myStyle(scope.row.status)">干部处</span>
            <span v-if="scope.row.status===3" :style="myStyle(scope.row.status)">分管副司长</span>
            <span v-if="scope.row.status===4" :style="myStyle(scope.row.status)">司长</span>
            <span v-if="scope.row.status===5" style="color:green;font-weight:bolder">已归档</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <span ref="EditBtns">
              <template v-if="scope.row.batchIndex">
                <el-dropdown v-if="inRoles('ROLE_training')&&scope.row.status<5" split-button  @click="handleDetail(scope.row.id)" size="small" type="primary" :loading="btnLoading" style="margin:10px 0 10px 0">
                  查看批次
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="handleEdit(scope.row)" >修改</el-dropdown-item>
                    <el-dropdown-item @click.native="handleDel(scope.row.id)" >删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-button v-else size="small" @click="handleDetail(scope.row.id)" type="primary" :loading="btnLoading" style="margin:10px 0 10px 0">查看批次</el-button>
                <!-- <el-button type="success" v-if="inRoles('ROLE_training')&&(!scope.row.classList||!scope.row.classList.length)" size="small" @click="handleEdit(scope.row)" :loading="btnLoading" style="margin:10px 0">编辑</el-button>
                <el-button type="danger" v-if="inRoles('ROLE_training')&&(!scope.row.classList||!scope.row.classList.length)" size="small" @click="handleDel(scope.row.id)" :loading="btnLoading" style="margin:10px 0">删除</el-button> -->
              </template>
              <template v-else>
                <el-button size="small" @click="handleDetailClass(scope.row.id)" :loading="btnLoading" style="margin:10px 0 10px 0">查看班次</el-button>
              </template>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination style="float:right" :total="totalnum" :page-size="pageSize" @current-change="handleCurrentChange" :current-page="pageNum" @size-change="handleSizeChange" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      </div>
      <!--新增界面-->
      <el-dialog :title="addFormTitle" :visible.sync="addFormVisible" :close-on-click-modal="false" :close-on-press-escape="false" >
        <div id="trainEditTable">
          <el-form :model="addForm" :rules="addFormRules" ref="addForm" label-width="120px" @submit.native.prevent>
            <el-form-item label="批次名称" prop="name">
              <el-input v-model="addForm.name" auto-complete="off" style="width:300px;" :maxlength="50"></el-input>
            </el-form-item>
            <el-form-item label="报名截止时间" prop="endDate">
              <el-date-picker v-model="addForm.endDate" type="date" placeholder="请填写日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
            </el-form-item>
            <el-form-item label="" >
              <el-button type="primary" :loading="addLoading" @click="addFormSubmit">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </section>
  </div>
</div>
</template>

<script>
import candidates from './candidates'
import classDetail from './classDetail.vue'
export default {
  components: {
    candidates,
    classDetail
  },
  data () {
    return {
      updateLogText: '',
      nullUnitVisible: false,
      nullUnitList: [],
      showPersonBtn: false,
      addFormTitle: '新增',
      status: null,
      myMonth: null,
      remindNum: 0,
      classId: null,
      classDetailVisual: false,
      userType: null,
      gridData2: [],
      pageNum: 1,
      pageSize: 20,
      classlist: [
        {classname: '党风廉政建设培训', content: '党风廉政建设', condition: '党员优先，50岁以下', departments: ['干部一处', '干部二处'], time: '2022-2-12', duration: '10天', trainUnit: '自然资源部人事司', place: '中央党校', year: 2022, remark: ''},
        {classname: '财务知识培训', content: '财务知识', condition: '财务工作相关人员，45岁以下', departments: ['干部一处', '干部三处'], time: '2022-1-10', duration: '5天', trainUnit: '自然资源部财务司', place: '自然资源部', year: 2022, remark: ''},
        {classname: '财务知识培训2', content: '财务知识', condition: '财务工作相关人员，45岁以下', departments: ['干部一处', '干部三处'], time: '2022-3-10', duration: '5天', trainUnit: '自然资源部财务司', place: '自然资源部', year: 2022, remark: ''}
      ],
      warningVisible: false,
      viewtype: 1,
      filters: {},
      btnLoading: false,
      tableHeight: 100,
      maxId: 0,
      isAdmin: true, // 临时调整为true
      isChuzhang: false,
      batchList: [],
      changeSizeFlag: false,
      listLoading: false,
      totalnum: 0,
      addFormVisible: false, // 新增界面是否显示
      addLoading: false,
      // 新增界面数据
      addForm: {
        name: '',
        endDate: '',
        status: 1
      },
      addFormRules: {
        name: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        endDate: [
          { required: true, message: '必填项', trigger: 'blur' }
        ]
      },
      editFormVisible: false, // 编辑界面是否显示
      editLoading: false,
      // 编辑界面数据
      editForm: {
        Name: '',
        TheYear: '',
        Id: 0
      },
      remindDayNumber: 7,
      remindDate: null,
      remindClassList: [],
      classListDate: [],
      loading: false,
      loading2: false
    }
  },
  watch: {
    myMonth: {
      handler (val) {
        this.getRemindClassList2()
      },
      immediate: true
    }
  },
  methods: {
    getTrainingAuth () {
      this.$http
        .get(this.$http.defaults.trainingAPI + `api/trainingBusAuth/getHasTrainingAuth`)
        .then(response => {
          if (response.data.success) {
            if (response.data.result) {
              this.trainingAuth = true // 一二三处人员可以如果模块内被授权可以看到已培训人员按钮，否则看不到
              this.$http
                .get(this.$http.defaults.trainingAPI + `api/trainingBusAuth/getCurrentUserAuth`)
                .then(res => {
                  if (res.data.success) {
                    if (res.data.result.length > 0) {
                      this.showPersonBtn = true
                    }
                  } else {
                    this.$message({
                      message: '获取失败:' + res.data.message,
                      type: 'error'
                    })
                  }
                })
                .catch(error => {
                  if (error.status === 500) {
                    this.$message({
                      message: '网络获取失败:' + error,
                      type: 'error'
                    })
                  }
                })
            } else {
              if (this.inRoles('ROLE_training')) {
                this.showPersonBtn = true // 模块管理员可以看到已培训人员按钮
              } else if (this.inRoles('ROLE_admin')) {
                this.handlePerson() // 系统管理员非模块管理员直接跳转到已培训人员界面
              } else {
                this.$http
                  .get(this.$http.defaults.trainingAPI + `api/trainingBusAuth/getCurrentUserAuth`)
                  .then(res => {
                    if (res.data.success) {
                      if (res.data.result.length > 0) {
                        this.handlePerson()
                      }
                    } else {
                      this.$message({
                        message: '获取失败:' + res.data.message,
                        type: 'error'
                      })
                    }
                  })
                  .catch(error => {
                    if (error.status === 500) {
                      this.$message({
                        message: '网络获取失败:' + error,
                        type: 'error'
                      })
                    }
                  })
              }
            }
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          if (error.status === 500) {
            this.$message({
              message: '网络获取失败:' + error,
              type: 'error'
            })
          }
        })
    },
    myStyle (status) {
      return status === this.userType ? 'color:blue;font-weight:bolder' : ''
    },
    classCount (day) {
      return this.classListDate.filter(item => item.startDate === day).length
    },
    showClass (day) {
      this.getRemindClassList(day)
    },
    changeRemindDay () {
      if (this.remindDayNumber) {
        this.$http
          .get(this.$http.defaults.trainingAPI + `api/trainingBusConfig/updateDayNum?num=` + this.remindDayNumber)
          .then(response => {
            if (response.data.success) {
              this.$message({
                message: '设置成功',
                type: 'success'
              })
              this.getRemindClassList()
            } else {
              this.$message({
                message: '设置失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            console.log(error)
            this.$message({
              message: '设置失败:' + error,
              type: 'error'
            })
          })
      }
    },
    getRemindClassList (startDate) {
      this.remindDate = startDate
      this.loading = true
      this.$http
        .get(this.$http.defaults.trainingAPI + `api/trainingBusClass/getClassList?startDate=` + (startDate || ''))
        .then(response => {
          this.loading = false
          if (response.data.success) {
            this.remindClassList = response.data.result
            this.remindNum = this.remindClassList.length
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.loading = false
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    getRemindClassList2 () {
      if (this.myMonth) {
        let year = this.myMonth.getFullYear()
        let month = (this.myMonth.getMonth() + 1) > 10 ? (this.myMonth.getMonth() + 1) : ('0' + (this.myMonth.getMonth() + 1))
        this.loading2 = true
        this.$http
          .get(this.$http.defaults.trainingAPI + `api/trainingBusClass/getClassListByDate?startDate=` + year + '-' + month)
          .then(response => {
            this.loading2 = false
            if (response.data.success) {
              this.classListDate = response.data.result
            } else {
              this.$message({
                message: '获取失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            this.loading2 = false
            console.log(error)
            this.$message({
              message: '获取失败:' + error,
              type: 'error'
            })
          })
      }
    },
    getRemindDayNumber () {
      this.$http
        .post(this.$http.defaults.trainingAPI + `api/trainingBusConfig/queryByPage`, {configKey: 'remindDayNumber', pageNum: 1, pageSize: 1})
        .then(response => {
          if (response.data.success) {
            this.remindDayNumber = response.data.result.records[0].configValue
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    handleDetailClass (id) {
      this.classDetailVisual = true
      this.classId = id
    },
    getDeptId () {
      let unitName = localStorage.getItem('unitName')
      let deptId = null
      switch (unitName) {
        case '干部一处':
          deptId = 1
          break
        case '干部二处':
          deptId = 2
          break
        case '干部三处':
          deptId = 3
          break
      }
      if (deptId) {
        this.userType = 2
      }
      if (this.inRoles('ROLE_training')) {
        this.userType = 1
      }
      if (this.inRoles('ROLE_fusizhang')) {
        this.status = 3
        this.userType = 3
      }
      if (this.inRoles('ROLE_sizhang')) {
        this.status = 4
        this.userType = 4
      }
    },
    handleSizeChange (val) {
      this.changeSizeFlag = true
      this.pageNum = 1
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      if (this.changeSizeFlag === false) {
        this.pageNum = val
        this.getList()
      }
    },
    searchPatch () {
      this.pageNum = 1
      this.getList()
    },
    handleWarning () {
      this.warningVisible = true
    },
    inRoles (str) {
      let arr = JSON.parse(localStorage.getItem('Roles'))
      if (arr.indexOf(str) === -1) {
        return false
      } else {
        return true
      }
    },
    handleDetail (id) {
      this.$router.push({path: `trainbatch/` + id})
    },
    handlePerson () {
      this.$router.push({name: `trainPerson`}, () => {})
    },
    handleAuth () {
      this.$router.push({name: `trainAuth`})
    },
    handleChart () {
      this.$router.push({name: `trainChart`})
    },
    showperson (id) {
      this.mypersonid = id
      console.log('mypersonid:' + this.mypersonid)
      this.showpersonVisible = true
    },
    // 获取用户列表
    getList () {
      this.listLoading = true
      let para = {pageNum: this.pageNum, pageSize: this.pageSize, batchName: this.filters.key}
      if (this.userType === 2) {
        para.onlySelf = true
      }
      para.status = this.status
      this.$http
        .post(this.$http.defaults.trainingAPI + `api/trainingBusBatch/queryByPage`, para)
        .then(response => {
          this.listLoading = false
          if (response.data.success === true) {
            console.log('获取成功')
            let batchList = response.data.result.records
            let allindex = 1
            let batchIndex = 1
            batchList.forEach((item, index, arr) => {
              arr[index].index = allindex
              arr[index].batchIndex = batchIndex
              allindex++
              batchIndex++
              if (item.classList && item.classList.length > 0) {
                item.classList.forEach((it, idx, arr2) => {
                  arr[index].classList[idx].index = allindex
                  allindex++
                })
              }
            })
            this.batchList = batchList
            this.totalnum = parseInt(response.data.result.total)
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch((error) => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    // 显示新增界面
    handleAdd: function () {
      this.addFormTitle = '新增'
      this.addFormVisible = true
      console.log('显示新增界面:' + this.addFormVisible)
      this.addForm = {
        name: ''
      }
    },
    // 显示编辑界面
    handleEdit: function (item) {
      this.addFormTitle = '编辑'
      let objData = Object.assign({}, item)
      this.addForm.name = objData.batchName
      this.addForm.id = objData.id
      this.addForm.status = objData.status
      this.addForm.endDate = objData.endDate
      this.addFormVisible = true
    },
    // 新增
    addFormSubmit: function () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.addLoading = true
          let para = {
            batchName: this.addForm.name,
            endDate: this.addForm.endDate,
            status: this.addForm.id ? null : 1,
            id: this.addForm.id
          }
          this.$http.post(this.$http.defaults.trainingAPI + `api/trainingBusBatch/save`, para).then(response => {
            console.log(response.data.success)
            if (response.data.success === true) {
              this.$message({
                message: '保存成功',
                type: 'success'
              })
              this.$refs['addForm'].resetFields()
              this.addFormVisible = false
              this.addLoading = false
              this.getList()
            } else {
              console.log('保存失败:' + response.data.message)
              this.$message({
                message: '保存失败:' + response.data.message,
                type: 'error'
              })
              this.addLoading = false
            }
          }).catch((error) => {
            console.log(error)
            this.$message({
              message: '保存失败:' + error,
              type: 'error'
            })
            this.addLoading = false
          })
        }
      })
    },
    // 删除
    handleDel: function (id) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.btnLoading = true
        let para = {ids: [id]}
        this.listLoading = true
        this.$http.post(this.$http.defaults.trainingAPI + `api/trainingBusBatch/remove`, para).then(response => {
          this.btnLoading = false
          if (response.data.success === true) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            console.log('删除失败:' + response.data.message)
            this.$message({
              message: '删除失败:' + response.data.message,
              type: 'error'
            })
          }
          this.getList()
        })
      })
    },
    showNullUnit () {
      this.nullUnitVisible = true
    },
    getNullUnit () {
      this.nullUnitList = []
      this.$http.get(this.$http.defaults.trainingAPI + `api/trainingBusUnit/getEmptyUnitList`).then(response => {
        if (response.data.success === true) {
          this.nullUnitList = response.data.result
          // if (this.nullUnitList.length > 0) {
          //   this.nullUnitVisible = true
          // }
        } else {
          console.log('获取失败:' + response.data.message)
          this.$message({
            message: '获取失败:' + response.data.message,
            type: 'error'
          })
        }
      })
    },
    getUpdatelog () {
      var _this = this
      this.$http
        .get('/dlog/status')
        .then(function (response) {
          _this.updateLogText = response.data.Message
        })
        .catch(function (error) {
          _this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - 272
      })
    }
  },
  mounted () {
    this.getDeptId()
    this.myMonth = new Date()
    this.getRemindClassList()
    this.getRemindClassList2()
    if (localStorage.getItem('trainingAuth') === '1') {
      this.$router.push({name: `trainPerson`}, () => {})
    }
    this.getList()
    this.getRemindDayNumber()
    this.getTrainingAuth()
    this.tableresize(this)
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.tableresize(_this)
    }
  },
  created () {
    if (this.inRoles('ROLE_training')) {
      this.getNullUnit()
      this.getUpdatelog()
    }
  }
}
</script>
<style>
  #trainIndex .el-table .el-table__cell {
    padding: 12px 0;
    min-width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
  }
  #trainIndex .wboxd .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  }
  #trainIndex .wboxd .el-table td,
  #trainIndex .el-table th{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体'
  }
  #trainIndex .el-table--border th,
  #trainIndex .el-table--border td {
    border-right: 1px solid #95B8E7;
  }
  #trainIndex .el-table th.is-leaf,
  #trainIndex .el-table td {
    border-bottom: 1px solid #95B8E7;
  }
  #trainIndex .el-table td{
    border-right: 1px solid #95B8E7;
    border-bottom: 1px solid #95B8E7;
  }

</style>
<style scoped>
  h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0;
  }
  #trainIndex .el-pagination{
    float: left;
    padding:7px 10px;
  }
  #trainIndex .wboxs{
    padding:5px 15px;
    width: calc(100% - 30px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
  #trainIndex .wboxd{
    padding:0;
    width: calc(100% - 0px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
  #trainEditTable .el-upload--text{
    float:left !important;
  }
  #trainEditTable .el-upload__tip{
    float:left !important;
    margin-left:5px;
    margin-top:0 !important;
  }
  #trainEditTable .el-upload-list--text{
    padding-top:5px;
    clear: both !important;
  }
  .el-table{
    border-top: 1px solid #95B8E7 !important;
  }
  .el-table--border th, .el-table--border td {
    border-right: 1px solid #95B8E7 !important;
  }
  .el-table th.is-leaf, .el-table td {
    border-bottom: 1px solid #95B8E7 !important;
  }
  .el-table thead.is-group th.el-table__cell{
    border-right: 1px solid #95B8E7 !important;
    border-bottom: 1px solid #95B8E7 !important;
  }
  #trainIndex .wboxd .el-table th.el-table__cell.is-leaf,
  #trainIndex .el-table td.el-table__cell {
    border-bottom: 1px solid #74A6CC !important;
  }
  #trainIndex .wboxd .el-table--border .el-table__cell{
    border-right: 1px solid #95B8E7 !important;
  }
  #trainEditTable .mytable{
    border-top: 1px solid #74A6CC;
    border-left: 1px solid #74A6CC;
    margin: 10px;
    width: calc(100% - 20px);
    font-size:var(--size14) !important;
    font-family: '宋体'
  }
  #trainEditTable .mytable th,
  #trainEditTable .mytable td{
    height: auto;
    padding: 10px;
    border-right: 1px solid #74A6CC;
    border-bottom: 1px solid #74A6CC;
    vertical-align:top;
    line-height: 150%;
  }
  #trainEditTable .mytable th{
    background:#C0DCF1;
    width:150px;
    vertical-align: middle;
  }
</style>
